<template>
    <div class="swiper">
        <div :class="`${type}-top`">
            <swiper :options="swiperOption" class="gallery-top" :class="{'padding':isShowButton}" ref="swiperTop">
                <slot></slot>
            </swiper>
            <div class="swiper-pagination" v-show="isShowPagination"></div>
            <div class="swiper-button-next" v-show="isShowButton"></div>
            <div class="swiper-button-prev" v-show="isShowButton"></div>
        </div>

        <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs" v-if="isThumbs">
            <swiper-slide v-for="(item,index) in $t('home.partner.lists')" :key="index">
                <a target="_blank" :href="item.href">
                    <img :src="require(`@/views/home/images/${item.img}`)" @mouseover="mouseover(index)" />
                </a>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
export default {

    data() {
        return {
            swiperOption: {
                slidesPerView: $(window).width() < 768 ? 1 : this.perView,
                slidesPerGroup: $(window).width() < 768 ? 1 : this.perGroup,
                slidesPerColumn: 1,
                parallax: true,
                loop: false,
                autoplay: {
                    delay: this.delay,
                    disableOnInteraction: false
                },
                loopFillGroupWithBlank: true,
                pagination: {
                    el: `.${this.type}-top .swiper-pagination`,
                    clickable: true
                },
                navigation: {
                    nextEl: `.${this.type}-top .swiper-button-next`,
                    prevEl: `.${this.type}-top .swiper-button-prev`
                }
            },
            swiperOptionThumbs: {
                slidesPerView: 5,
                spaceBetween: 10,
                slideToClickedSlide: true
            }
        }
    },
    props:{
        type:{
            type: String,
            default:''
        },
        isThumbs:{
            type: Boolean,
            default: false
        },
        delay:{
            type: Number,
            default: 3000,
        },
        perView:{
            type: Number,
            default:1
        },
        perGroup:{
            type: Number,
            default:1
        },
        isShowPagination:{
            type: Boolean,
            default: false
        },
        isShowButton:{
            type: Boolean,
            default: false
        }
    },
    methods:{
        mouseover(index){
            this.$refs.swiperTop.swiper.slideTo(index)
        }
    }
}
</script>

<style lang="scss" scoped>
.swiper{
    width:100%;
    position: relative;
    .gallery-top{
        &.padding{
            padding: 0 50px;
        }
    }
    .swiper-button-prev{
        outline: 0 none;
        width: 52px;
        height: 52px;
        background-image: url(./images/swiper-button-prev.png);
        background-size: 52px auto;
        &:hover{
            background-color: rgba(222, 222, 222, 0.2);
            border-radius: 50%;
        }
    }
    .swiper-button-next{
        outline: 0 none;
        width: 52px;
        height: 52px;
        background-image: url(./images/swiper-button-next.png);
        background-size: 52px auto;
        &:hover{
            background-color: rgba(222, 222, 222, 0.2);
            border-radius: 50%;
        }
    }
    .swiper-pagination{
        bottom:-30px;
        left:50%;
        transform: translateX(-50%);
    }
    .gallery-thumbs{
        img{
            width:100%;
            max-width:180px;
        }
    }
}
</style>
